<template>
  <div class="navigation">
    <div class="mobile-nav">
      <img v-if="form.DefaultStyle=='1'" class="mobile-header-image" src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-web-stc/retail/images/store/listTpl_1.png?v=1.2" alt="">
      <img v-else class="mobile-header-image" src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-web-stc/retail/images/store/listTpl_2.png?v=1.2" alt="">
      <template v-if="form.DefaultStyle=='1'">
        <div
          v-for="good in 4"
          v-show="form.displayElement"
          :key="`good${good}`"
          :class="`goodsSales goodsSales${good}`"
        >已售1.2万件</div>
        <img
          v-for="item in 4"
          :key="item"
          :class="`cart cart${item}`"
          :src="carturl[form.shoppingStyle]"
          alt=""
        >
      </template>
      <div v-else class="showLgImg2">
        <div
          v-for="good in 2"
          v-show="form.displayElement"
          :key="`good${good}`"
          :class="`goodsSales goodsSales${good}`"
        >已售1.2万件</div>
        <img
          v-for="item in 2"
          :key="item"
          :class="`cart cart${item}`"
          :src="carturl[form.shoppingStyle]"
          alt=""
        >
      </div>
    </div>
    <div class="mobile-config">
      <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="默认样式">
          <a-radio-group v-model="form.DefaultStyle">
            <a-radio value="1">
              单列
            </a-radio>
            <a-radio value="2">
              双列
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="显示元素">
          <a-checkbox v-model="form.displayElement">
            商品销量
          </a-checkbox>
        </a-form-model-item>
        <a-form-model-item label="购物车">
          <a-radio-group v-model="form.shoppingStyle">
            <a-radio value="1">
              样式1
            </a-radio>
            <a-radio value="2">
              样式2
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      data: [],
      carturl: {
        '1': 'https://cdn2.weimob.com/saas/@assets/saas-fe-retail-web-stc/retail/images/store/showCart_1.png?v=1',
        '2': 'https://cdn2.weimob.com/saas/@assets/saas-fe-retail-web-stc/retail/images/store/showCart_2.png?v=1'
      },
      form: {
        DefaultStyle: '1',
        shoppingStyle: '1',
        displayElement: true
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.navigation{
  display: flex;
  margin: 20px 0;
  padding: 20px;
  background-color: #f0f2f5;
}
.mobile-nav{
  width: 375px;
  height: 667px;
  background-color: #fff;
  position: relative;
  .mobile-header-image{
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
  }
  .goodsSales{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #9E9E9E;
    line-height: 24px;
    width: 230px;
    height: 24px;
    position: absolute;
    left: 124px;
    &1{
      top: 204px;
    }
    &2{
      top: 320px;
    }
    &3{
      top: 436px;
    }
    &4{
      top: 550px;
    }
  }
  .cart{
    width: 23px;
    height: 23px;
    position: absolute;
    left: 336px;
    &1{
      top: 236px;
    }
    &2{
      top: 350px;
    }
    &3{
      top: 464px;
    }
    &4{
      top: 580px;
    }
  }
  .showLgImg2{
    .goodsSales{
      font-family: PingFangSC-Regular;
      font-size: 11px;
      color: #9E9E9E;
      line-height: 24px;
      width: 130px;
      height: 24px;
      position: absolute;
      top: 377px;
      &1{
        left: 14px;
      }
      &2{
        left: 194px;
      }
    }
    .cart{
      width: 23px;
      height: 23px;
      top: 396px;
      position: absolute;
      &1{
        left: 158px;
      }
      &2{
        left: 338px;
      }
    }
  }
}
.mobile-config{
  width: 431px;
  margin-left: 40px;

}
</style>
